<template>
  <div v-if="visible">
    <el-dialog
      visible
      :title="title"
      append-to-body
      width="600px"
      @close="handleClose"
    >
      <ul class="sms-list">
        <template v-for="(sms,index) in smsList">
          <li :key="sms.id" :class="{'sms-item': true,'select': selectIndex === index}" @click="() => {handleChange(index)}">
            {{ sms.content }}
          </li>
        </template>
      </ul>
      <Empty :visible="smsList.length === 0" />
      <div slot="footer" class="footer">
        <el-button size="mini" @click="handleClose">
          取消
        </el-button>
        <el-button size="mini" type="primary" @click="handleOk">
          保存
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Empty from '@/components/Empty'
import { fetchDropSmsTemplate } from '@/api/commonDropDown'
export default {
  name: 'SelectTreeView',
  components: { Empty },
  props: {
    visible: {
      type: Boolean,
      default: () => false
    },
    title: {
      type: String,
      default: () => '请选择'
    },

    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      smsList: [],
      selectIndex: -1
    }
  },
  watch: {
    visible: {
      handler: function(e) {
        e && this.postSmsTemplateList()
      },
      immediate: true
    }
  },

  methods: {
    postSmsTemplateList() {
      fetchDropSmsTemplate().then(res => {
        this.$data.smsList = res
        this.$data.selectIndex = res.findIndex(e => e.smsFingerprint === this.$props.value.smsFingerprint)
      })
    },
    handleChange(index) {
      this.$data.selectIndex = index
    },
    handleClose() {
      this.$emit('close')
    },
    handleOk() {
      this.$emit('submit', this.$data.smsList[this.$data.selectIndex])
    }

  }
}
</script>

<style lang="scss" scoped>
  .sms-list {
    max-height: 400px;
    overflow-y: auto;
  }
  .sms-item {
     background-color: #fafbff;
    border: 1px solid #d9ddee;
    margin-right: 10px;
    margin-bottom: 4px;
    padding: 10px;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
  }
  .select{
    border-color: #566CF5;
    color: #566CF5;
  }
</style>
